﻿@model EasyLift.TMS.Web.Models.MissionHeaderViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        $("#MissionHeader_MissionDate").datetimepicker({
            dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm tt', ampm: true,
            numberOfMonths: 1, minDate: -7, maxDate: 7, hourGrid: 4, minuteGrid: 10
        });

        $("#MissionHeader_PushDateTime").datetimepicker({
            dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm tt', ampm: true,
            numberOfMonths: 1, showButtonPanel: true, changeMonth: true, changeYear: true,
            minDate: -7, maxDate: 7, hourGrid: 4, minuteGrid: 10
        });

        $("#MissionHeader_DepartureDateTime").datetimepicker({
            dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm tt', ampm: true,
            numberOfMonths: 1, showButtonPanel: true, changeMonth: true, changeYear: true,
            minDate: -7, maxDate: 7, hourGrid: 4, minuteGrid: 10
        });

        $("#MissionHeader_RollOutDateTime").datetimepicker({
            dateFormat: 'mm/dd/yy', timeFormat: 'hh:mm tt', ampm: true,
            numberOfMonths: 1, minDate: -7, maxDate: 7, hourGrid: 4, minuteGrid: 10
        });

    });
</script>
@{ Html.EnableClientValidation(); }
@{
   
  
    string strAction = "Create";
    if (Request.Url.ToString().Contains("/Edit/"))
    {
        strAction = "Edit";
    }

    using (Html.BeginForm(strAction, "MissionHeader", new { id = Model.MissionHeader.MissionID }, FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>MissionHeader</legend>
        @Html.HiddenFor(model => model.MissionHeader.MissionID)
        <div class="newline">
            <div class="sameline-wrapper">
                <div id="ActionLinkButtons">
                    <input type="submit" value="Save" />
                    @{if (Request.Url.ToString().Contains("/Edit/"))
                      {
                        <a href="/Reports/MissionManifest.aspx?q=@Model.MissionHeader.MissionID" target="_blank">
                            Print / Export Manifest</a>
                      }
                    }
                    @Html.ActionLink("Back to List", "Index")
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.TMR)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.TMR)
                    @Html.ValidationMessageFor(model => model.MissionHeader.TMR)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.MissionDate)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.MissionDate)
                    @Html.ValidationMessageFor(model => model.MissionHeader.MissionDate)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.MissionTypeCode)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.MissionHeader.MissionTypeCode, Model.MissionType)
                    @Html.ValidationMessageFor(model => model.MissionHeader.MissionTypeCode)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.MissionNumber)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.MissionNumber)
                    @Html.ValidationMessageFor(model => model.MissionHeader.MissionNumber)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.EscortingUnitCode)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.EscortingUnitCode)
                    @Html.ValidationMessageFor(model => model.MissionHeader.EscortingUnitCode)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.EscortingUnitPOC)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.EscortingUnitPOC)
                    @Html.ValidationMessageFor(model => model.MissionHeader.EscortingUnitPOC)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.EscortingUnitTEL)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.EscortingUnitTEL)
                    @Html.ValidationMessageFor(model => model.MissionHeader.EscortingUnitTEL)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.RequestingUnitCode)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.RequestingUnitCode)
                    @Html.ValidationMessageFor(model => model.MissionHeader.RequestingUnitCode)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.RequestingUnitPOC)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.RequestingUnitPOC)
                    @Html.ValidationMessageFor(model => model.MissionHeader.RequestingUnitPOC)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.RequestingUnitTEL)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.RequestingUnitTEL)
                    @Html.ValidationMessageFor(model => model.MissionHeader.RequestingUnitTEL)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.DaysOfRation)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.DaysOfRation)
                    @Html.ValidationMessageFor(model => model.MissionHeader.DaysOfRation)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.PushDateTime)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.PushDateTime)
                    @Html.ValidationMessageFor(model => model.MissionHeader.PushDateTime)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.DepartureDateTime)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.DepartureDateTime)
                    @Html.ValidationMessageFor(model => model.MissionHeader.DepartureDateTime)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.RollOutDateTime)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.RollOutDateTime)
                    @Html.ValidationMessageFor(model => model.MissionHeader.RollOutDateTime)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.NoofFB)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.NoofFB)
                    @Html.ValidationMessageFor(model => model.MissionHeader.NoofFB)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.NoofFBBT)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.NoofFBBT)
                    @Html.ValidationMessageFor(model => model.MissionHeader.NoofFBBT)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.NoofHET)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.NoofHET)
                    @Html.ValidationMessageFor(model => model.MissionHeader.NoofHET)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.NoofHETBT)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.NoofHETBT)
                    @Html.ValidationMessageFor(model => model.MissionHeader.NoofHETBT)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.NoofDrivers)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.NoofDrivers)
                    @Html.ValidationMessageFor(model => model.MissionHeader.NoofDrivers)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.NoofACCs)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.NoofACCs)
                    @Html.ValidationMessageFor(model => model.MissionHeader.NoofACCs)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.AccCivilID)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.AccCivilID)
                    @Html.ValidationMessageFor(model => model.MissionHeader.AccCivilID)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.AccName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.AccName)
                    @Html.ValidationMessageFor(model => model.MissionHeader.AccName)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.AccTEL)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.AccTEL)
                    @Html.ValidationMessageFor(model => model.MissionHeader.AccTEL)
                </div>
            </div>
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.AccVehicleNumber)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MissionHeader.AccVehicleNumber)
                    @Html.ValidationMessageFor(model => model.MissionHeader.AccVehicleNumber)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MissionHeader.MissionStatusCode)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.MissionHeader.MissionStatusCode, Model.MissionStatus)
                    @Html.ValidationMessageFor(model => model.MissionHeader.MissionStatusCode)
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div id="ActionLinkButtonsBottom">
                    <input type="submit" value="Save" />
                    @Html.ActionLink("Back to List", "Index")
                </div>
            </div>
        </div>
    </fieldset>
    }

}
<script type="text/javascript">

    function VehicleAutocomplete_element(value, options) {
        // create input element
        var $ac = $('<input type="text" />');
        // setting value to the one passed from jqGrid
        $ac.val(value);
        // creating autocomplete
        $ac.autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Vehicle/GridData",
                    dataType: "json",
                    data: {
                        sidx: "VehicleNumber",
                        sord: "DESC",
                        page: 1,
                        rows: 10,
                        _search: true,
                        searchField: "VehicleNumber",
                        searchOper: "cn",
                        searchString: request.term
                    },
                    success: function (data) {
                        response($.map(data.rows, function (item) {
                            return {
                                label: item.cell[1].toString(),
                                value: item.id,
                                plateNo: item.cell[2].toString(),
                                company: item.cell[3].toString(),
                                status: item.cell[6].toString(),
                                id: item.id
                            }
                        }));
                    }
                });
            },
            minLength: 0,
            delay: 100,
            focus: function (event, ui) {
                $(this).val(ui.item.value);
                return false;
            },
            select: function (event, ui) {
                $ac.val(ui.item.id);
                return false;
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
				    .data("item.autocomplete", item)
				    .append("<a><span class='ui-icon ui-icon-print' style='float: left; margin-right: .3em;'></span>" + item.id + "<br>" + item.label + "," + item.plateNo + "," + item.company + "<br>" + item.status + "</a>")
				    .appendTo(ul);
            };

        $ac.focus(function () { $(this).keydown(); })


        // returning element back to jqGrid
        return $ac.get(0);

    }

    function VehicleAutocomplete_value(elem, op, v) {
        if (op == 'set') {
            $(elem).val(v);
        }
        return $(elem).val();
    }

    function DriverAutocomplete_element(value, options) {
        // create input element
        var $ac = $('<input type="text" />');
        // setting value to the one passed from jqGrid
        $ac.val(value);
        // creating autocomplete
        $ac.autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Driver/GridData",
                    dataType: "json",
                    data: {
                        sidx: "CivilID",
                        sord: "DESC",
                        page: 1,
                        rows: 10,
                        _search: true,
                        searchField: "All",
                        searchOper: "cn",
                        searchString: request.term
                    },
                    success: function (data) {
                        response($.map(data.rows, function (item) {
                            return {
                                label: item.cell[1].toString(),
                                value: item.id,
                                lastname: item.cell[2].toString(),
                                country: item.cell[4].toString(),
                                status: item.cell[6].toString(),
                                id: item.id
                            }
                        }));
                    }
                });
            },
            minLength: 0,
            delay: 100,
            focus: function (event, ui) {
                $(this).val(ui.item.value);
                return false;
            },
            select: function (event, ui) {
                $ac.val(ui.item.id);
                return false;
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        })
        .data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
				.data("item.autocomplete", item)
				.append("<a><span class='ui-icon ui-icon-person' style='float: left; margin-right: .3em;'></span>" + item.id + "<br>" + item.label + "," + item.lastname + "," + item.country + "<br>" + item.status + "</a>")
				.appendTo(ul);
        };

        $ac.focus(function () { $(this).keydown(); })


        // returning element back to jqGrid
        return $ac.get(0);

    }

    function DriverAutocomplete_value(elem, op, v) {
        if (op == 'set') {
            $(elem).val(v);
        }
        return $(elem).val();
    }



    jQuery(document).ready(function () {
        $("#list").jqGrid({
            url: '/MissionDetail/GridData?MissionID=@Model.MissionHeader.MissionID',
            width: 720,
            height: 250,
            datatype: 'json',
            mtype: 'GET',
            colNames: ['ID', 'Vehicle Number', 'Plate#', 'Driver Civil ID', 'Driver Name', 'TrailerNumber'],
            colModel: [
                        { name: 'MissionDetailID', index: 'MissionDetailID', width: 40, align: 'left', hidden: false, search: true, searchoptions: { sopt: ['cn'] }, editable: false, editoptions: { readonly: true, size: 10} },
                        { name: 'VehicleNumber', index: 'VehicleNumber', width: 140, align: 'left', hidden: false, search: true, searchoptions: { sopt: ['cn'] }, editable: true, editrules: { required: true }, edittype: 'custom', editoptions: { 'custom_element': VehicleAutocomplete_element, 'custom_value': VehicleAutocomplete_value} },
                        { name: 'LicensePlateNumber', index: 'LicensePlateNumber', width: 240, align: 'left', search: false, editable: false },
                        { name: 'DriverCivilID', index: 'DriverCivilID', width: 240, align: 'left', search: true, searchoptions: { sopt: ['cn'] }, editable: true, editrules: { required: true }, edittype: 'custom', editoptions: { 'custom_element': DriverAutocomplete_element, 'custom_value': DriverAutocomplete_value} },
                        { name: 'DriverName', index: 'DriverName', width: 240, align: 'left', search: false, editable: false },
                        { name: 'TrailerNumber', index: 'TrailerNumber', width: 140, align: 'left', search: false, editable: false}],
            pager: '#pager',
            rowNum: 10,
            rowList: [10, 20, 50],
            shrinkToFit: false,
            sortname: 'MissionDetailID',
            sortorder: "DESC",
            viewrecoreds: false,
            rownumbers: true,
            hidegrid: false,
            imgpath: ''
        }).jqGrid('navGrid', '#pager',
                { edit: true, add: true, del: true, refresh: true, search: true },
                { url: "/MissionDetail/Edit" },
                { url: "/MissionDetail/Create?MissionID=@Model.MissionHeader.MissionID" },
                { url: "/MissionDetail/Delete" });
    });

    function EditLinkFormatter(cellvalue, options, rowObject) {
        return '<a href=Edit/' + rowObject[0] + ' >' + cellvalue + '</a>'
    }

</script>
<table id="list">
    <tr>
        <td />
    </tr>
</table>
<div id="pager">
</div>
